<template>
    <view>
        <view class="header">
            <view class="header-search">
                <input type="text">
                <i class="iconfont icon-search"></i>
            </view>
            <view class="header-condition">
                <view :class="active === 0 ? 'condition-item active' : 'condition-item'" @click="active = 0">综合排序</view>
                <view :class="active === 1 ? 'condition-item active' : 'condition-item'" @click="active = 1">销售</view>
                <view :class="active === 2 ? 'condition-item active' : 'condition-item'" @click="active = 2">价格<i class="iconfont icon-select-tb"></i></view>
            </view>
        </view>
        <view class="content">
            <view class="content-item">
                <view class="item-img"></view>
                <view class="item-info">
                    <view class="item-name">桂花糕</view>
                    <view class="item-post">包邮</view>
                </view>
                <view class="item-price">￥27.0</view>
            </view>
            <view class="content-item">
                <view class="item-img"></view>
                <view class="item-info">
                    <view class="item-name">桂花糕</view>
                    <view class="item-post">包邮</view>
                </view>
                <view class="item-price">￥27.0</view>
            </view>
            <view class="content-item"></view>
            <view class="content-item"></view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            active: 0
        }
    }
}
</script>

<style>
    .header {
        height: 57rpx;
        background: #24C79C;
        padding: 21.5rpx 38rpx;
        display: flex;
        justify-content: left;
    }
    .header-search {
        position: relative;
        width: 159rpx;
        height: 57rpx;
        background:rgba(255,255,255,1);
        border-radius:29px;
    }
    .header-search input {
        height: 100%;
        padding: 0 50rpx 0 20rpx;
    }
    .icon-search {
        position: absolute;
        top: 16rpx;
        right: 20rpx;
        color: #BFBFBF;
        font-size: 30rpx;
    }
    .header-condition {
        display: flex;
        justify-content: space-between;
        margin-left: 38rpx;
    }
    .condition-item {
        width: 160rpx;
        text-align: center;
        color: #F7F7F7;
        font-size: 28rpx;
        font-weight: lighter;
        line-height: 57rpx;
    }
    .icon-select-tb {
        font-size: 25rpx;
        color: #ffffff;
    }
    .active {
        font-size: 28rpx;
        font-weight: bold;
        color: #ffffff;
    }
    .content {
        padding: 0 38rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .content-item {
        width: 215rpx;
        height: 320rpx;
        background: #ffffff;
        margin-top: 30rpx;
    }
    .item-img {
        width: 215rpx;
        height: 230rpx;
        border: 1rpx solid #ccc;
    }
    .item-info {
        display: flex;
        justify-content: space-between;
        padding: 0 15rpx;
        margin-top: 16rpx;
    }
    .item-name {
        color: #333333;
        font-size: 24rpx;
        font-weight: 500;
    }
    .item-post {
        width: 66rpx;
        height: 26rpx;
        border: 1rpx solid rgba(36,199,156,1);
        border-radius: 13rpx;
        font-size: 22rpx;
        font-weight: 400;
        color:rgba(36,199,156,1);
        line-height: 25rpx;
        text-align: center;
    }
    .item-price {
        color: #FF1E1E;
        font-size: 24rpx;
        font-weight: 500;
        padding-left: 15rpx;
    }
</style>